<template>
  <div>
    <!-- 输入用户信息 -->
    <h-row>
      <h-col span="14" offset="5">
        <h-form :model="user" :label-width="80">
          <h-form-item label="客户类型" required>
            <h-select
              v-model="user.user_type"
              placeholder="请选择客户类型"
              class="input"
            >
              <h-option value="个人">个人</h-option>
              <h-option value="机构">机构</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="客户姓名" required>
            <h-input
              class="input"
              v-model="user.name"
              placeholder="请输入客户姓名"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
          <h-form-item label="证件类型" required>
            <h-select
              class="input"
              v-model="user.identity_card_type"
              placeholder="请选择证件类型"
            >
              <h-option value="身份证">身份证</h-option>
              <h-option value="中国护照">中国护照</h-option>
              <h-option value="士兵证">士兵证</h-option>
              <h-option value="户口本">户口本</h-option>
              <h-option value="警官">警官</h-option>
              <h-option value="文职">文职</h-option>
              <h-option value="台胞证">台胞证</h-option>
              <h-option value="其他">其他</h-option>
            </h-select>
          </h-form-item>
          <h-form-item label="证件号码" required>
            <h-input
              class="input"
              v-model="user.identity_card_id"
              placeholder="请输入证件号码"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
        </h-form>
      </h-col>
    </h-row>
    <h-row>
      <h-col span="24" class="button-container">
        <h-button type="primary" @click="next">下一步</h-button>
      </h-col>
    </h-row>
  </div>
</template>

<script>
export default {
  name: "enterUserInfo",
  data() {
    return {
      user: {
        identity_card_id: "",
        user_type: "",
        identity_card_type: "",
        name: "",
        preference: "",
      },
    };
  },
  methods: {
    check() {
      //检查数据是否填写完整
      if (
        this.user.identity_card_id === "" ||
        this.user.identity_card_id === undefined ||
        this.user.user_type === "" ||
        this.user.user_type === undefined ||
        this.user.identity_card_type === "" ||
        this.user.identity_card_type === undefined ||
        this.user.name === "" ||
        this.user.name === undefined
      ) {
        this.$hMessage.warning("请填写完整信息");
        return false;
      }
      return true;
    },
    next() {
      if (this.check()) {
        //跳转到下一个组件
        this.$store.commit("components/incrementCurrentRecharge");
      }
    },
  },
  mounted() {
    //取出数据
    this.user = this.$store.getters["user/userInfo"];
  },
  beforeDestroy() {
    //保存数据
    this.$store.commit("user/setUserInfo", this.user);
  },
};
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.input {
  width: 70vh;
}
</style>